<template>
  <!-- 售后订单 客服端 -->
  <div class="app-container jklis">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      class="search-form-new"
      label-width="80px"
    >

     <el-form-item el-form-item label="店铺" prop="status" v-hasPermi="['searchTenantID']">
        <el-select
          v-model="queryParams.tenantId"
          placeholder="请选择店铺"
          clearable
          filterable
        >
          <el-option
            v-for="dict in tenantList"
            :key="dict.tenantId"
            :label="dict.tenantName"
            :value="dict.tenantId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入商品编号"
          clearable
          
        />
      </el-form-item>
      <!-- <el-form-item label="游戏账号" prop="accountNumber">
        <el-input
          v-model="queryParams.accountNumber"
          placeholder="请输入游戏账号"
          clearable
          
        />
      </el-form-item> -->
      <el-form-item label="游戏账号" prop="realAccountNumber">
        <el-input
          v-model="queryParams.realAccountNumber"
          placeholder="请输入游戏账号"
          clearable
          
        />
      </el-form-item>
      <el-form-item label="订单编号" prop="saleOrderNo">
        <el-input
          v-model="queryParams.saleOrderNo"
          placeholder="请输入订单编号"
          clearable
          
        />
      </el-form-item>
      <el-form-item label="售后编号" prop="no">
        <el-input
          v-model="queryParams.no"
          placeholder="请输入售后编号"
          clearable
          
        />
      </el-form-item>
      <el-form-item label="申请人" prop="applicantName">
        <el-input
          v-model="queryParams.applicantName"
          placeholder="请输入申请人"
          clearable
          
        />
      </el-form-item>
      <el-form-item label="申请日期" prop="remark">
        <el-date-picker
          v-model="timer"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="searchList"
          
        >
        </el-date-picker>
      </el-form-item>
   

      <el-form-item class="btns"> 
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          type="warning"
          @click="resetQuery"
          >重置</el-button
        >
     
      </el-form-item>
    </el-form>
    <div class="zdy-main customTab">
      <el-tabs
        type="border-card"
        v-model="actived"
        @tab-click="tabChange"
        v-loading="loading"
      >
        <el-tab-pane
          :label="item.name"
          :name="item.value"
          v-for="(item, key) in commonMaps.afterOrderStateArr"
          :key="key"
        >
          <div class="table_box">
            <el-table
              :data="tableData.records"
              style="width: 100%"
              stripe
            >
            <!-- 提号时间，商品ID 游戏类型 区服 实名状态   游戏账号【对应的商品链接】 -->
            
            <!-- <el-table-column
              prop=""
              label="归属部门"
              min-width="120"
            ></el-table-column> -->
            <el-table-column
              prop="no"
              label="订单编号"
              min-width="200"
            ></el-table-column>
            <el-table-column prop="goodsId" label="商品编号" min-width="120">
              <!-- <template slot-scope="scope">
                <span class="link" @click="openH5(scope.row.goodsId)">{{
                  scope.row.goodsId
                }}</span>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="gameName"
              label="游戏名称"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="accountNumber"
              label="游戏账号"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="actualAmount"
              label="实付金额"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="afterAmount"
              label="退款金额"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="applicantName"
              label="申请人"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="申请时间"
              min-width="160"
            ></el-table-column>
            <el-table-column prop="" label="售后状态" min-width="120">
              <template slot-scope="scope">
                <span>{{
                  commonMaps.afterOrderStateMap[scope.row.status] || commonMaps.afterOrderStateMap["3"]
                }}</span
                ><br />
      
              </template>
            </el-table-column>
         
            <el-table-column fixed="right" label="操作" min-width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="openOrder(scope.row)"
                  v-if="scope.row.status == 3&&checkPermi(['afterOrderForTenant:afterOrderDone'])"
                  >处理</el-button>
                <el-button
                  type="text"
                  @click="viewOrder(scope.row.id)"
                  v-if="scope.row.status != 3&&checkPermi(['afterOrderForTenant:afterOrderView'])"
                  >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getList" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
   
    <afterSellDone ref="afterSellDone"></afterSellDone>
    <afterSellView ref="afterSellView"></afterSellView>
   
  </div>
</template>

<script>

import orderAfterApi from '@/api/pickUp/afterSale.js'
import orderApi from "@/api/pickUp/order.js";
import afterSellDone from './components/afterSellDone.vue'
import afterSellView from './components/afterSellView.vue'
export default {
  name: "SaleAfterOrder",
  components: {
    afterSellDone,afterSellView
  },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      timer:[],
      btnLoading: false,
      loading: false,
      actived: "3",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 3,
        account: null,
        accountId: null,
        tel: null,
        dataType: "sell",
      },
      copyVlaue: "",
      retailDomainList: [],
      IMhost: "",
    };
  },
  created() {
    // if (this.$router.currentRoute.query.orderStatus) {
    //   this.actived = this.$router.currentRoute.query.orderStatus;
    //   this.queryParams.orderStatus =
    //     this.$router.currentRoute.query.orderStatus;
    // }
    this.getList();
    // this.getDomain();
    // this.getIMhost();
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList
    }
  },
  methods: {
    searchList(){
      this.queryParams.pageNum = 1;
      this.getList()
    },
  
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.applicantTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.applicantTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.applicantTimeStart = "";
        this.queryParams.applicantTimeEnd = "";
      }
      // if(checkPermi(['searchTenantID']))
      orderAfterApi.saleOrderAfterList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // 打开处理售后的弹窗
    openOrder(row){
this.$refs.afterSellDone.open(row)
    },
    // 打开查看售后的弹窗
    viewOrder(id){
      this.$refs.afterSellView.open(id)
    },
    // tabs切换时触发
    tabChange() {
      this.queryParams.pageNum = 1;
      this.queryParams.status = this.actived;
      this.getList();
    },
    // // 复制商品信息
    // keyCopy(data) {
    //   let hostt = `${this.retailDomainList[0].dictValue}/#/pages/detail/index?id=${data.accountId}`;
    //   this.copyVlaue = `商品ID：${data.accountId}\n 游戏类型：${data.type}\n 自编号：${data.orderNo}\n 区服：${data.regional}\n 商品详情链接：${hostt}\n 换绑手机号：${data.tel}\n 需要的资料：${data.ziliao}\n 备注：${data.remark}\n`;
    // },
    // 复制成功和失败的方法
    onCopy(e) {
      this.$modal.msgSuccess("复制成功");
      this.copyVlaue = "";
    },
    onError() {
      this.$modal.msgError("复制失败");
      this.copyVlaue = "";
    },
    //查看订单详情
    goOrderDetail(row) {
      this.$refs.orderDetailDialog.open(row.id, "kefu");
      
    },
    // 编辑发货信息
    editSendGoods(row,flag){
      this.$refs.sendGoodsDialog.open(row,flag)
    },
    // 转到交易中
    transJiaoYiZhong(id){
      this.$confirm("确认将该订单转为交易中吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          orderApi.changeOrderStatus({id:id}).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.getList()
          });
        })
        .catch(() => {});
    },
    // 更改支付状态
    editPayStatus(row){
      this.$refs.payEdit.open(row,'kefu');
    },
    // 取消订单
    cancelOrder(id) {
      this.$refs.cancelOrderSure.open(id,'kefu');
    },
    // 编辑价格
    editPrice(row) {
      this.$refs.editPrice.open(row);
    },
    // 完成订单
    completion(row) {
      let obj = {
        id: row.id,
        remark: row.remark,
      };
      this.$refs.completionOrder.open(obj);
    },

    // 申请售后
    afterSale(row) {
      this.$alert("正在开发中，敬请期待！");
      // this.$refs.afterSaleCommit.open(row)
    },
    // 修改信息
    editOrder(row) {
      // pickDialog
      this.$refs.pickDialog.open(row, "edit");
    },
    //
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        status: this.queryParams.status,
        dataType: "sell"
      };
      this.timer = []
      this.getList();
    },
    // 打开h5详情
    // openH5(goodsId) {
    //   // this.$refs.h5Dialog.open(this.h5Url + info.accountId);
    //   let hostt = `${this.retailDomainList[1].dictValue}/#/pages/detail/index?id=${goodsId}`;
    //   this.$refs.h5Dialog.open(hostt);
    // },
    // 查看换绑信息
    changeInfo(row) {
      this.$refs.detailDialog.open(row.id);
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    exportOrder() {},
  },
};
</script>
<style lang="scss" scoped>
.link {
  color: blue;
  cursor: pointer;
}
</style>
